<template>
  <div class="item_detail">
    <c-nav-bar :title="title" :fixed="fixed"/>

    <van-row type="flex" justify="center" style="margin-bottom: 50px">
      <van-col span="24">
        <div v-html="goods.detail"></div>
      </van-col>
    </van-row>

    <van-goods-action>
      <van-goods-action-mini-btn icon="cart-o" @click="goToCart" :info="numberOfCartItem">
        购物车
      </van-goods-action-mini-btn>
      <van-goods-action-big-btn @click="addToCart">
        加入购物车
      </van-goods-action-big-btn>
      <van-goods-action-big-btn primary @click="buyNow">
        立即购买({{goods.price}} ¥)
      </van-goods-action-big-btn>
    </van-goods-action>

    <van-popup v-model="showContact">
      <!--<md-kefu mobile="16454193338" />-->
    </van-popup>
  </div>
</template>

<script>
import {
  Row,
  Col,
  GoodsAction,
  GoodsActionBigBtn,
  GoodsActionMiniBtn,
  Popup,
  Tag,
  Toast
} from 'vant'
import NavBar from '@/components/navbar'
import qs from 'qs'
import { mapActions, mapGetters } from 'vuex'

export default {
  components: {
    [Popup.name]: Popup,
    [GoodsAction.name]: GoodsAction,
    [GoodsActionBigBtn.name]: GoodsActionBigBtn,
    [GoodsActionMiniBtn.name]: GoodsActionMiniBtn,
    [Col.name]: Col,
    [Row.name]: Row,
    [Tag.name]: Tag,
    [NavBar.name]: NavBar
  },
  data () {
    const isLogin = !!localStorage.getItem('token')
    return {
      fixed: true,
      isLogin,
      order_details: [],
      remark: '',
      showContact: false,
      cartInfo: null,
      goods: { title: '' }
    }
  },
  async created () {
    await this.getProduct(this.$route.params.id)
    // this.order_details = [{ product: this.goods.id, quantity: 1 }]
  },
  computed: {
    ...mapGetters('cart', {
      numberOfCartItem: 'numberOfCartItem'
    }),
    images () {
      return this.goods ? [this.goods.thumb] : []
    },
    title () {
      return this.goods ? this.goods.title : '商品详情'
    }
  },
  methods: {
    ...mapActions({
      addProductToCart: 'cart/addProductToCart'
    }),
    async getProduct (id) {
      const { data } = await this.$api.product.productDetail(id)
      console.log(data)
      if (data.code !== 200) {
        Toast(data.desc)
      } else {
        this.goods = data.data
        this.goodsId = data.data ? data.data.id : 0
      }
    },
    onClickLeft () {
      this.$router.go(-1)
    },
    formatPrice () {
      return '¥' + (100.00 * this.goods.price / 100).toFixed(2)
    },
    goToCart () {
      this.$router.push('/cart')
    },
    addToCart () {
      this.addProductToCart(this.goods)
    },
    // 立即购买
    async buyNow () {
      // create order and route to payment page
      let source = this.$route.query.source || 0
      let sourceId = this.$route.query.source_id || 0
      const params = {
        'source': source,
        'source_id': sourceId,
        'remark': this.remark,
        'order_details': [ { 'product': this.goods.id, quantity: 1 } ]
      }
      console.log(qs.stringify(params))
      const { data } = await this.$api.order.orderCreate(params)
      console.log(data)
      if (data.code !== 200) {
        Toast(data.desc)
      } else {
        this.$router.replace({ name: 'payment', params: { id: data.data.id } })
      }
    }
  }
}
</script>

<style lang="less" scoped>

</style>
